<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>猿粪の日记-发布文章</title>
    <base th:href="@{/}">
    <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <link rel="stylesheet" th:href="@{/bootstrap/sys/css/ifream.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/sys/css/publish.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/ifream/iconfont.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/iconfont/mood/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/index/text-effect/linkstyles.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/my-layer-div.css}"/>
    <style>
    </style>
</head>
<body>
<div id="header">
    <div class="header_content">
        <div class="header-banner">
            <div class="grid__item color-11">
                <a class="link link--yaku" th:href="@{/}">
                    <span>Y</span><span>u</span><span>a</span><span>n</span>
                </a>
            </div>
        </div>
        <div class="header-opt">
            <ul class="opt_ul">
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-huiyuan"></i>会员</a></li>
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-zhuti1"></i>主题</a></li>
                <li class="opt_li extend"><a th:href="@{/tool/toolNav}"><i class="iconfont icon-xiangzi"></i>工具</a></li>
                <li class="opt_li login" id="login_btn"><a th:href="@{/loginPage}"><i
                        class="iconfont icon-dengru"></i>登入</a></li>
                <li class="opt_li online_opt" id="online_btn">
                <span class="avatar">
                    <img src="">
                </span>
                    <span class="user_info">
                    <span class="user_item logout"><a th:href="@{/sys/myZone}"><i class="iconfont icon-zhuye1"></i>我的主页</a></span>
                    <span class="user_item logout"><a th:href="@{/sys/userInfo}"><i class="iconfont icon-shezhi"></i>设置</a></span>
                    <span class="user_item logout"><a href="javascript:void(0);"><i class="iconfont icon-bangzhu"></i>帮助</a></span>
                    <span class="user_item logout"><a th:href="@{/signOut}"><i class="iconfont icon-tuichu1"></i>退出</a></span>
                </span>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="container">
    <!--搜索栏搜索内容-->
    <div id="main_content">
        <div class="tip_span">
            <div class="tips">
                <i class="iconfont icon-jinggao1 mr5"></i>本站域名已备案, 请勿发布<span
                    class="warn">违法违规内容</span>,&nbsp;一旦发现绝不姑息,<span class="warn">永久封号处理</span>
            </div>
        </div>
        <div class="content_form">
            <!--标题-->
            <div class="tr">
            <span class="td">
                <label for="title">标题</label>
            </span>
                <span class="td">
                <input autocomplete="off" type="text" name="title" id="title"/>
            </span>
            </div>
            <!--描述-->
            <div class="tr">
            <span class="td">
                <label for="paper">描述（写一个吸引人的描述吧）</label>
            </span>
                <span class="td">
                <input autocomplete="off" type="text" name="paper" id="paper"/>
            </span>
            </div>
            <!--心情-->
            <div class="tr">
                <span class="td">
                    <label>心情（带上你现在的心情）</label>
                </span>
                <span class="td">
                    <div class="mood" id="mood">
                        <!--<label class="radios-label">
                            <input type="radio" value="icon-weifengqianx:微风" name="mood"><i
                                class="bui-radios iconfont icon-weifengqianx" title="微风"></i>
                        </label>-->
                    </div>
                </span>
            </div>
            <!--分类-->
            <div class="tr">
                <span class="td">
                    <label>分类（选择合适的分类可以提高搜索精度哦）</label>
                </span>
                <span class="td">
                    <div class="sort">
                        <span class="sort_detail" id="checked_sort"></span>
                        <ul class="fs_ul" id="fs_ul">
                            <!--<li class="fs_li">一级</li>-->
                        </ul>
                        <ul class="cs_ul" id="cs_ul">
                            <!--<li class="cs_li">二级呀</li>-->
                        </ul>
                    </div>
                </span>
            </div>
            <!--内容-->
            <div class="tr">
                <span class="td">
                    <label>内容编写（可配图编写内容, 创作你的创作）</label>
                </span>
                <span class="td">
                    <div id="editor"></div>
                </span>
            </div>

            <div class="tr">
                <span class="btn publish">提交发布</span>
                <span class="btn preview">预览</span>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="stand_by"><span class="support">本文由<a href="javascript:void(0);">兰州</a>提供技术支持</span>赣ICP备20000118号</div>
</div>
<script type="text/javascript" th:src="@{https://lib.baomitu.com/wangEditor/3.1.1/wangEditor.min.js}"></script>
<script type="text/javascript" th:src="@{https://lib.baomitu.com/jquery/3.5.0/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/layopen.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script>
    $(document).ready(function () {
        let TOKEN = null, SORT_MAP = {}, SORT_KEY = [], MOOD = [];
        /*{'舔狗': ['儿童', '学生', '少年', '青年', '老人', '老实人', '卑微', '苦逼'],
        '深情': ['情真意切', '情深似海', '赤诚相待', '生死相依', '形影不离', '不分彼此', '不期而然', '心心相印'],
        '搞笑': ['谈笑风生', '欢声笑语', '谈笑自若', '饶有风趣', '忍俊不禁', '喜不自胜', '喜形于色', '喜笑颜开', '笑抽风了', '笑里藏包', '啼笑皆非', '苟言欢笑'],
        '尴尬': ['哭笑不得', '啼笑皆非', '无地自容', '进退两难', '脸红心跳', '面黑耳赤', '笑而不语', '无可奈何'],
        '哭泣': ['西湖的水', '鬼哭狼嚎', '涕泗滂沱', '如泣如诉', '嚎啕大哭', '泣不成声', '声泪俱下', '抽噎抽咽'],
        '无聊': ['像鬼一样', '百无聊赖', '看天发呆', '兴味索然', '穷极无聊', '万念俱灰', '无所事事', '槁木死灰'],
        '女神': ['沉鱼落雁', '国色天香', '倾国倾城', '出水芙蓉', '绝代佳人', '翩落惊鸿', '一笑倾城', '美目盼兮'],
        '男神': ['英俊潇洒', '玉树临风', '贱眉新墓', '貌赛西门庆', '人魔狗样', '威风潺潺', '面如金纸', '气宇轩昂'],},*/

        loadUser();
        setMoodMap();
        setArchiveMap();

        /**
         * 设置心情
         */
        function setMoodMap() {
            ajaxPost('mood/getAllMood', {}, function () {
            }, function (result) {
                if (result.code + '' === '200') {
                    MOOD = result.data;
                    writeMood();
                } else {
                    layer.msg(result.message, {icon: 0});
                }
            }, function () {
                layer.msg('服务器好像出了问题, 加载数据出错', {icon: 0});
            });
        }

        /**
         * 重新心情
         */
        function writeMood() {
            let mood = '';
            for (let i = 0; i < MOOD.length; i++) {
                let v = MOOD[i];
                mood += '<label class="radios-label">' +
                    '<input type="radio" value="' + v.moodKey + '" name="mood"><i ' +
                    'class="bui-radios iconfont ' + v.icon + '" title="' + v.name + '"></i>' +
                    '</label>'
            }
            $('#mood').empty().html(mood);
        }


        /**
         * 设置归档
         */
        function setArchiveMap() {
            ajaxPost('archive/getAllArchive', {}, function () {
            }, function (result) {
                if (result.code + '' === '200') {
                    let data = result.data;
                    for (let i = 0; i < data.length; i++) {
                        let v = data[i];
                        if (v.fatherNode === 0) {
                            let key = v.archiveKey;
                            SORT_MAP[key] = v;
                            SORT_MAP[key]['child'] = [];
                            SORT_KEY.push(key);
                        }
                    }
                    for (let i = 0; i < data.length; i++) {
                        let v = data[i];
                        let fNode = v.fatherNode;
                        if (fNode !== 0) {
                            SORT_MAP[fNode]['child'].push(v);
                        }
                    }
                } else {
                    layer.msg(result.message, {icon: 0});
                }
            }, function () {
                layer.msg('服务器好像出了问题, 加载数据出错', {icon: 0});
            });
        }

        /**
         * 监听hover
         */
        $('.sort .sort_detail').mouseover(function () {
            let html = '';
            for (let i = 0; i < SORT_KEY.length; i++) {
                let v = SORT_KEY[i];
                let archive = SORT_MAP[v];
                html += '<li class="fs_li" data-value="' + archive.archiveKey + '">' + archive.name + '</li>';
            }
            $('#cs_ul').empty();
            $('#fs_ul').empty().html(html);
        });

        /**
         * 监听一级菜单
         */
        $('#fs_ul').on('click', '.fs_li', function () {
            let key = $(this).data('value');
            $(this).addClass('active').siblings().removeClass('active');
            let scValues = SORT_MAP[key].child;
            if (scValues && scValues.length > 0) {
                let html = '';
                for (let i = 0; i < scValues.length; i++) {
                    let v = scValues[i];
                    html += '<li class="cs_li" data-value="' + v.archiveKey + '">' + v.name + '</li>';
                }
                $('#cs_ul').empty().html(html);
            }
        });


        /**
         * 监听二级菜单
         */
        $('#cs_ul').on('click', '.cs_li', function () {
            let fsv = $('#fs_ul .fs_li.active').eq(0).data('value');
            let fs = SORT_MAP[fsv];
            let csv = $(this).data('value');
            let childNodes = fs.child, node = {};
            for (let i = 0; i < childNodes.length; i++) {
                let v = childNodes[i];
                if ((v.archiveKey + '') === (csv + '')) {
                    node = v;
                    break;
                }
            }
            let cs = fs.name + ' > ' + node.name;
            $('#checked_sort').empty().attr('data-value', csv).text(cs);
        });


        /**
         * 保存
         */
        $('#main_content .tr .btn.publish').on('click', function () {
            let valid = validate();
            if (valid) {
                let formData = getFormData();
                let url = "article/addOrUpdateArticle";
                ajaxPost(url, formData, function () {
                    layer.load(1);
                }, function (result) {
                    if (result.code === 200) {
                        layer.closeAll('loading');
                        layer.confirm('发布成功, 正等待管理员审核中!', {
                            icon: 1,
                            btn: ['回首页', '继续创作'] //按钮
                        }, function () {
                            window.location.href = "/";
                        }, function () {
                            clearData();
                        });
                    } else {
                        layer.closeAll('loading');
                        layer.msg(result.message, {icon: 0});
                    }
                }, function () {
                    layer.closeAll('loading');
                    layer.msg('服务器好像出了问题, 请稍后重试', {icon: 0});
                });
            }
        });


        /**
         * 预览数据
         */
        $('#main_content .tr .btn.preview').on('click', function () {
            let content = editor.txt.html();
            if (content !== '<p><br></p>') {
                layer.open({
                    type: 1,
                    title: false,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['970px', '600px'], //宽高
                    content: content
                });
            } else {
                WarnAlert('请写下你的大作再预览哦');
            }
        });

        /**
         * 获取提交表单数据
         */
        function getFormData() {
            let data = {};
            let $title = $('#title'),
                $paper = $('#paper'),
                $checkedSort = $('#checked_sort');
            data['title'] = $title.val();
            data['paper'] = $paper.val();
            data['archive'] = $checkedSort.data('value');
            data['mood'] = $('input[name="mood"]:checked').val();
            data['content'] = editor.txt.html();
            return data;
        }

        /**
         * 清除数据
         */
        function clearData() {
            let data = {};
            let $title = $('#title'),
                $paper = $('#paper'),
                $checkedSort = $('#checked_sort');
            $title.val('');
            $paper.val('');
            $checkedSort.attr('data-value', '').text('');
            writeMood();
            editor.txt.clear();
        }


        /**
         * 参数检验
         * @returns {boolean}
         */
        function validate() {
            let $title = $('#title'),
                $paper = $('#paper'),
                $checkedSort = $('#checked_sort'),
                $mood = $('#mood'),
                $editor = $('#editor');
            let title = $title.val();
            if (!title || title.length > 20) {
                $title.addClass('data_warn');
                WarnAlert('请填写合法的标题');
                return false;
            }
            $title.removeClass('data_warn');

            let paper = $paper.val();
            if (!paper || paper.length > 50) {
                $paper.addClass('data_warn');
                WarnAlert('请填写合法的描述');
                return false;
            }
            $paper.removeClass('data_warn');

            let mood = $('input[name="mood"]:checked').val();
            if (!mood) {
                $mood.addClass('data_warn');
                WarnAlert('请选择你的心情');
                return false;
            }
            $mood.removeClass('data_warn');

            let sort = $checkedSort.data('value');
            if (!sort) {
                $checkedSort.addClass('data_warn');
                WarnAlert('请选择文章分类');
                return false;
            }
            $checkedSort.removeClass('data_warn');

            let content = editor.txt.html();
            if (content === '<p><br></p>') {
                $editor.addClass('data_warn');
                WarnAlert('填写文章内容数据');
                return false;
            }
            $editor.removeClass('data_warn');
            return true;
        }


        let E = window.wangEditor;
        let editor = new E('#editor');
        // 关闭粘贴样式的过滤
        editor.customConfig.pasteFilterStyle = false;
        // 忽略粘贴内容中的图片
        editor.customConfig.pasteIgnoreImg = true;
        // 配置z-index
        editor.customConfig.zIndex = 10;
        // 上传文件配置
        // base64 保存图片
        editor.customConfig.uploadImgShowBase64 = true;
        // 将图片大小限制为 3M
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        // 上传路径
        editor.customConfig.uploadImgServer = 'upload/wangImg';
        // 限制一次最多上传 5 张图片
        editor.customConfig.uploadImgMaxLength = 5;
        // 跨域上传中如果需要传递 cookie 需设置 withCredentials
        editor.customConfig.withCredentials = true;
        // 将 timeout 时间改为 3s
        editor.customConfig.uploadImgTimeout = 3000;
        // 上传失败监听
        editor.customConfig.customAlert = function (info) {
            // info 是需要提示的内容
            ErrorAlert('上传文件：' + info + '失败')
        };
        editor.create();


        // 标准方法定义
        function loadUser() {
            let url = "getToken";
            $.ajax({
                type: "post",
                url: url,
                data: {},
                dataType: 'json',
                async: 'false',
                error: function (e) {
                    // 啥也不做, 就当没有发生什么
                    $('#login_btn').css('display', 'block');
                    $('#online_btn').css('display', 'none');
                },
                success: function (result) {
                    result = JSONUtil.parseObj(result);
                    if (parseInt(result.code) === 200) {
                        TOKEN = result.data;
                        $('#login_btn').css('display', 'none');
                        $('#online_btn').css('display', 'block').find(".avatar img").attr('src', TOKEN.avatar);
                    } else {
                        console.log("获取当前登入用户异常哦, 请检查你的参数捏!");
                    }
                }
            });
        }

    });
</script>
</body>
</html>